<template>
  <div class="div_photo">
    <!--            单独使用组件.-->
    <div @contextmenu.prevent="openMenu($event)">
      <!--头像.-->
      <img class="img_photo" :src="this.$store.state.userInfo.img_url">
      <!--      <img class="img_photo" :src="require('../../assets/main_photo_52.jpg')">-->
    </div>
    <div class="div_left_session_icon div_left_general" @click="showCurSession">
      <el-icon class="left_session_icon" :size="25" :color="this.$store.state.leftStatus.iconColorStatu.sessionIcon">
        <chat-round/>
      </el-icon>
    </div>
    <div class="div_left_friend_icon div_left_general" @click="showFriends">
      <el-icon class="left_friend_icon" :size="25" :color="this.$store.state.leftStatus.iconColorStatu.friendIcon">
        <Avatar/>
      </el-icon>
    </div>
    <div class="div_left_cloud_icon div_left_general" @click="showClouds">
      <el-icon class="left_cloud_icon" :size="25" :color="this.$store.state.leftStatus.iconColorStatu.cloudIcon">
        <Cloudy/>
      </el-icon>
    </div>
    <div class="div_left_button_add" @click="showAddFriends">
      <el-icon :size="25" :color="this.$store.state.leftStatus.iconColorStatu.addFreiend">
        <plus/>
      </el-icon>
    </div>
    <div>
      <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
        <li>{{ this.$store.state.userInfo.username }}</li>
        <li>XXX</li>
        <li>XXX</li>
        <li>XXX</li>
        <li>XXX</li>
        <li>XXX</li>
        <li @click="removeMenu">取消</li>
        <!--        <li @click="handleDelete(rightClickItem)">从会话列表中移除</li>-->
      </ul>
    </div>
  </div>
</template>

<script>

import {ChatRound, Avatar, Cloudy, Plus} from '@element-plus/icons'
import {ipcRenderer} from 'electron'

export default {
  name: "mainleft",
  components: {ChatRound, Avatar, Cloudy, Plus},
  data() {
    return {
      sessionIconColor: "#2277fe",
      visible: false,
      top: 0,
      left: 0,
    }
  },
  methods: {
    openMenu(e) {
      console.log(e)
      // let x = e.pageX
      // let y = e.pageY
      // 设定右键菜单的边框距离.
      this.top = 45
      this.left = 55
      this.visible = true
    },

    removeMenu() {
      this.visible = false
    },

    showCurSession() {
      this.$store.commit('setLeftStatusIconColorStatus', 1)
    },
    showFriends() {
      this.$store.commit('setLeftStatusIconColorStatus', 2)
    },
    showClouds() {
      this.$store.commit('setLeftStatusIconColorStatus', 3)
    },
    showAddFriends() {
      this.$store.commit('setLeftStatusIconColorStatus', 4)
      // 提示
      ipcRenderer.send("flashFrame", "Hello Word")
    },
  },
  mounted() {
    // DOM修改背景颜色为加深.
    //34, 119, 254
    // document.getElementById('div_left_session_icon_id').style.backgroundColor = "'#3498db'"
  },
  watch: {
    visible() {
      if (this.visible) {
        document.body.addEventListener("click", () => {
          this.visible = false
        })
      } else {
        document.body.removeEventListener("click", () => {
          this.visible = false
        })
      }
    }
  }
}
</script>

<style scoped>
/*左侧.*/
.div_photo {
  width: 100%;
  height: 70px;
  /*border: 1px dashed rgba(241, 196, 15, 0.98);*/
  /*border-bottom: 1px solid #bdc3c7;*/
  border-bottom: 1px solid rgba(189, 195, 199, 0.33);
}

/*还需要加个边框. */
.img_photo {
  margin-top: 5px;
  border-radius: 6px;
  width: 52px;
  height: 52px;
}

.div_left_general {
  /*width: 100%;*/
  height: 40px;
  /*border: 1px dashed red;*/
}

.div_left_session_icon {
  margin-top: 20px;
  padding-left: 12px;
}

.left_session_icon {
  margin-top: 5px;
}

.div_left_friend_icon {
  padding-left: 12px;
  /*margin-top: 10px;*/
}

.left_friend_icon {
  margin-top: 6px;
}

.div_left_cloud_icon {
  padding-left: 12px;
}

.left_cloud_icon {
  margin-top: 6px;
}

.div_left_button_add {
  margin-top: 655px;
  padding-left: 12px;
}


.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 16px 2px rgba(0, 0, 0, 0.3);
}

.contextmenu li {
  margin: 0;
  padding: 7px 16px;
}

.contextmenu li:hover {
  background: #eee;
  cursor: default;
}

/*动态控制颜色随鼠标变化.*/
</style>